<!-- 
	动态组件：优惠券购买组件
	props: 
		data: 组件数据
		
	action:
		
 -->
<template>
    <view
        class="dynamic-coupon"
        :class="{
            'mbui-coupon-style-1': data.CouponPageStyle == 1,
            'mbui-coupon-style-2': data.CouponPageStyle == 2,
            'mbui-coupon-style-3': data.CouponPageStyle == 3,
            'mbui-coupon-style-4': data.CouponPageStyle == 4,
        }">
        <view class="mbui-coupon-huan mbui-coupon-huan-new">
            <view
                class="mbui-coupon-li bg-primary color-white"
                @click="gobuy(item)"
                v-for="(item, index) in list"
                v-if="index <= moreNum - 1">
                <view class="mbui-coupon-bg style-2"></view>
                <view class="mbui-coupon-li-left style-2 mubi-coupon-border-color"></view>
                <view class="mbui-coupon-li-right style-2 mubi-coupon-border-color"></view>
                <view class="mbui-coupon-huan-inner">
                    <view class="inner-bd">
                        <view class="inner-bd-num">
                            <text class="style-1" v-if="item.PrivilegeWay == 1 || item.PrivilegeWay == 2">￥</text>
                            <text class="style-2" v-if="item.PrivilegeWay == 1 || item.PrivilegeWay == 2">￥</text>
                            <text class="style-3-text" v-if="item.PrivilegeWay == 0">{{ item.PrivilegeValueStr }}</text>
                            <text class="style-3-text" v-if="item.PrivilegeWay == 1">{{ item.PrivilegeValue }}</text>
                            <text class="style-3-text" v-if="item.PrivilegeWay == 2"
                                >{{ item.PrivilegeValue }}-{{ item.MaxPrivilegeValue }}</text
                            >
                            <text class="style-1" v-if="item.PrivilegeWay == 0">折</text>
                            <text class="style-2" v-if="item.PrivilegeWay == 0">折</text>
                            <text class="style-3 style-3-text" v-if="item.PrivilegeWay == 1 || item.PrivilegeWay == 2"
                                >元</text
                            >
                            <text class="style-3" v-if="item.PrivilegeWay == 0">折</text>
                            <view
                                class="style-4 mbui-coupon-tl"
                                v-if="item.PrivilegeWay == 1 || item.PrivilegeWay == 2">
                                <view>￥</view>
                                <view>优惠券</view>
                            </view>
                            <view class="style-4 mbui-coupon-tl" v-if="item.PrivilegeWay == 0">
                                <view>折</view>
                                <view>折扣券</view>
                            </view>
                            <view class="mbui-coupon-canbuy style-2" v-if="data.CouponPageWay == 0">
                                <text>{{ item.NeedMoney }}元可购买</text>
                            </view>
                            <view class="mbui-coupon-canbuy style-2" v-if="data.CouponPageWay == 1">
                                <text>{{ item.NeedIntegral }}积分可兑换</text>
                            </view>
                            <view class="mbui-coupon-canbuy style-2" v-if="data.CouponPageWay == 2">
                                <text>免费领取</text>
                            </view>
                            <view class="mbui-coupon-canbuy style-4" v-if="data.CouponPageWay == 0">
                                {{ item.NeedMoney }}元可购买
                            </view>
                            <view class="mbui-coupon-canbuy style-4" v-if="data.CouponPageWay == 1">
                                {{ item.NeedIntegral }}积分可兑换
                            </view>
                            <view class="mbui-coupon-canbuy style-4" v-if="data.CouponPageWay == 2"> 免费领取 </view>
                        </view>
                        <view class="mbui-coupon-limit style-3">单笔满{{ item.OrderPrice }}元使用</view>
                    </view>
                    <view class="inner-fi">
                        <view class="inner-fi-left style-3 mubi-coupon-bg-color"></view>
                        <view class="inner-fi-right style-3 mubi-coupon-bg-color"></view>
                        <view class="mbui-coupon-limit style-1">单笔满{{ item.OrderPrice }}元使用</view>
                        <view class="mbui-coupon-canbuy style-1" v-if="data.CouponPageWay == 0"
                            >{{ item.NeedMoney }}元可购买</view
                        >
                        <view class="mbui-coupon-canbuy style-1" v-if="data.CouponPageWay == 1"
                            >{{ item.NeedIntegral }}积分可兑换</view
                        >
                        <view class="mbui-coupon-canbuy style-1" v-if="data.CouponPageWay == 2">免费领取</view>
                        <view class="mbui-coupon-canbuy color-white bg-primary style-3" v-if="data.CouponPageWay == 0">
                            {{ item.NeedMoney }}元可购买
                        </view>
                        <view class="mbui-coupon-canbuy color-white bg-primary style-3" v-if="data.CouponPageWay == 1">
                            {{ item.NeedIntegral }}积分可兑换
                        </view>
                        <view class="mbui-coupon-canbuy color-white bg-primary style-3" v-if="data.CouponPageWay == 2">
                            免费领取
                        </view>
                    </view>
                    <view class="mbui-coupon-buy style-2">
                        {{ data.CouponPageWay == 2 ? "免费领取" : "立即购买" }}
                        <view class="mbui-coupon-buy-top style-2 mubi-coupon-bg-color"></view>
                        <view class="mbui-coupon-buy-bottom style-2 mubi-coupon-bg-color"></view>
                    </view>
                    <view class="mbui-coupon-buy style-4 bg-primary color-white">
                        {{ data.CouponPageWay == 2 ? "免费领取" : "立即购买" }}
                    </view>
                    <view
                        class="inner-tags color-white bg-primary style-3"
                        v-if="item.PrivilegeWay == 1 || item.PrivilegeWay == 2"
                        >优惠券</view
                    >
                    <view class="inner-tags color-white bg-primary style-3" v-if="item.PrivilegeWay == 0">折扣券</view>
                    <view class="style-4 inner-border"></view>
                </view>
            </view>
            <view
                v-if="data.CouponPageMore == 1 && list.length > data.CouponPageSize && moreNum != 100"
                class="more"
                @click="lookmore"
                >查看更多>></view
            >
        </view>
        <uni-popup ref="popTip" type="center" :animation="true">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>温馨提示</text>
                </view>
                <view class="pop-return-center" v-if="data.CouponPageWay == 0"
                    >确定使用余额{{ tipitem.NeedMoney }}元购买该优惠券吗？</view
                >
                <view class="pop-return-center" v-if="data.CouponPageWay == 1"
                    >确定使用{{ tipitem.NeedIntegral }}积分兑换该优惠券吗？</view
                >
                <view class="pop-return-center" v-if="data.CouponPageWay == 2">确定领取该优惠券吗？</view>
                <view class="pop-action">
                    <view @click="Close">取消</view>
                    <view @click="Confirm">确定</view>
                </view>
            </view>
        </uni-popup>
        <uni-popup ref="popWin" type="center" :animation="true">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>温馨提示</text>
                </view>
                <view class="pop-return-center"
                    >{{ data.CouponPageWay == 0 ? "购买" : "兑换" }}成功！是否前往卡包查看？</view
                >
                <view class="pop-action">
                    <view @click="winClose">取消</view>
                    <view @click="winConfirm">确定</view>
                </view>
            </view>
        </uni-popup>
        <uni-popup ref="popLose" type="center" :animation="true">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>温馨提示</text>
                </view>
                <view class="pop-return-center">余额不足！是否前往充值？</view>
                <view class="pop-action">
                    <view @click="loseClose">取消</view>
                    <view @click="loseConfirm">确定</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { GetList, GetCanGetList, UserBuyCoupon, ExchangeCoupon } from "@/service/api/coupon.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    props: {
        data: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            list: [],
            moreNum: 0,
            tipitem: {},
        }
    },
    mounted() {
        this.moreNum = this.data.CouponPageSize
        this.getData()
    },
    methods: {
        getData() {
            let param = {
                buyTpye: this.data.CouponPageWay,
                pageIndex: 1,
                pageSize: 100,
            }
            GetCanGetList(param).then((res) => {
                if ((res.State = 1)) {
                    this.list = res.Data.Data
                } else {
                    this.easyToast(res.Msg)
                }
                this.$emit("loadBack", this.data.index)
            })
        },
        lookmore() {
            this.moreNum = 100
        },
        gobuy(item) {
            let token = storage.getCache("token")
            if (!token || token == "") {
                this.$showModal({ show: true })
                return false
            }
            this.tipitem = item
            this.$refs.popTip.open()
        },
        winClose() {
            this.$refs.popWin.close()
        },
        loseClose() {
            this.$refs.popLose.close()
        },
        winConfirm() {
            this.easyGoTo("/pages_me/packet/coupon/index")
            this.winClose()
        },
        loseConfirm() {
            this.easyGoTo("/pages_me/packet/finance/recharge")
            this.loseClose()
        },
        Close() {
            this.$refs.popTip.close()
        },
        Confirm() {
            let path = "?couponId=" + this.tipitem.ID
            if (this.data.CouponPageWay == 0) {
                UserBuyCoupon(path).then((res) => {
                    if (res.State == 1) {
                        this.Close()
                        setTimeout((e) => {
                            this.$refs.popWin.open()
                        }, 1000)
                    } else {
                        this.Close()
                        if (res.Msg.indexOf("余额不足") >= 0) {
                            setTimeout((e) => {
                                this.$refs.popLose.open()
                            }, 1000)
                        } else {
                            this.easyToast(res.Msg)
                        }
                    }
                })
            } else if (this.data.CouponPageWay == 1) {
                ExchangeCoupon(path).then((res) => {
                    if (res.State == 1) {
                        this.Close()
                        setTimeout((e) => {
                            this.$refs.popWin.open()
                        }, 1000)
                    } else {
                        this.Close()
                        this.easyToast(res.Msg)
                    }
                })
            } else {
                //免费领取
                if (this.tipitem.IsBuy == 1) {
                    UserBuyCoupon(path).then((res) => {
                        if (res.State == 1) {
                            this.Close()
                            this.easyToast("领取成功")
                        } else {
                            this.Close()
                            this.easyToast(res.Msg)
                        }
                    })
                } else {
                    ExchangeCoupon(path).then((res) => {
                        if (res.State == 1) {
                            this.Close()
                            this.easyToast("领取成功")
                        } else {
                            this.Close()
                            this.easyToast(res.Msg)
                        }
                    })
                }
            }
        },
    },
}
</script>

<style lang="scss" scope>
// @import "@/uni-sub-base/components/dynamic/style/dynamic.scss";
.more {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 14rpx;
    color: $color-gray-3;
    font-size: 28rpx;
    text-align: center;
    width: 100%;
}
.mbui-coupon-huan-new {
    padding: 10rpx;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}
.mbui-coupon-huan-container view {
    margin: 0;
}
.mbui-coupon-huan-new .mbui-coupon-li {
    position: relative;
    width: calc(50% - 19rpx);
    margin: 10rpx;
    padding: 0;
    overflow: hidden;
    background: $app-color-main;
    color: #fff;
}

.mbui-coupon-style-1 .mbui-coupon-huan-new .mbui-coupon-li {
    width: calc(50% - 32rpx);
}
.mbui-coupon-style-4 .mbui-coupon-huan-new .mbui-coupon-li {
    width: calc(50% - 34rpx);
}
.mbui-coupon-huan-new .mbui-coupon-huan-inner {
    position: relative;
    background: initial;
}
.mbui-coupon-huan-new .inner-bd {
    padding: 0;
}

.mbui-coupon-huan-new .inner-bd-num {
    text-align: center;
}

.inner-bd-num text {
    font-size: 60rpx;
    line-height: 1;
    color: #fff;
}

.inner-bd-num .style-1,
.inner-bd-num .style-2 {
    font-size: 20rpx;
}

.inner-bd-num .style-3 {
    font-size: 28rpx;
}

.inner-bd-num .style-1 {
    vertical-align: top;
    display: inline-block;
    padding-top: 10rpx;
}

.mbui-coupon-huan-new .mbui-coupon-limit,
.mbui-coupon-huan-new .mbui-coupon-canbuy,
.mbui-coupon-huan-new .mbui-coupon-buy {
    font-size: 20rpx;
    text-align: center;
    position: relative;
}

.mbui-coupon-huan-new .inner-fi {
    position: relative;
}

.mbui-coupon-huan-new .mbui-coupon-buy {
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    letter-spacing: 4rpx;
}

/* 加载更多项 */
.mbui-coupon-huan-more {
    display: none;
    padding: 10rpx 0 30rpx;
    color: #999;
    text-align: center;
}

.show-coupon-huan-more .mbui-coupon-huan-more {
    display: block;
}

/* 第一种优惠券 */
.mbui-coupon-style-1 .mbui-coupon-li {
    border-radius: 8rpx;
    padding: 6rpx;
}

.mbui-coupon-style-1 .mbui-coupon-huan-inner {
    border-radius: 8rpx;
    padding: 20rpx;
    border: 2rpx solid #fff;
    height: calc(100% - 44rpx);
}

.mbui-coupon-style-1 .mbui-coupon-huan-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 10rpx;
}

.mbui-coupon-style-1 .inner-bd {
    flex-shrink: 0;
    flex-grow: 0;
}

.mbui-coupon-style-1 .inner-fi {
    margin-left: 6rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mbui-coupon-style-1 .mbui-coupon-limit,
.mbui-coupon-style-1 .mbui-coupon-canbuy {
    width: 100%;
    line-height: 1;
    padding: 12rpx 0;
    text-align: center;
    position: relative;
}

.mbui-coupon-style-1 .mbui-coupon-limit {
    border-bottom: 2rpx dashed currentColor;
}
/* 第二种优惠券 */
.mbui-coupon-style-2 .mbui-coupon-li-left,
.mbui-coupon-style-2 .mbui-coupon-li-right {
    content: "";
    position: absolute;
    height: 100%;
    width: 0;
    top: 0;
    border-left: 8rpx dotted #f6f6f6;
}

.mbui-coupon-style-2 .mbui-coupon-li-left {
    left: -4rpx;
}

.mbui-coupon-style-2 .mbui-coupon-li-right {
    right: -4rpx;
}

.mbui-coupon-style-2 .mbui-coupon-bg {
    position: absolute;
    width: 120rpx;
    height: 100%;
    background: url(/static/img/coupon-bg.png) no-repeat;
    background-size: 120rpx;
}

.mbui-coupon-style-2 .mbui-coupon-huan-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mbui-coupon-style-2 .inner-bd {
    flex: 1;
}

.mbui-coupon-style-2 .inner-fi {
    display: none;
}

.mbui-coupon-style-2 .mbui-coupon-canbuy text {
    font-size: 20rpx;
    padding: 2rpx 20rpx;
    border-radius: 30rpx;
    border: 2rpx solid currentColor;
}
.mbui-coupon-style-2 .mbui-coupon-buy-top,
.mbui-coupon-style-2 .mbui-coupon-buy-bottom {
    content: "";
    position: absolute;
    width: 14rpx;
    height: 14rpx;
    border-radius: 100%;
    background: #f6f6f6;
    left: -8rpx;
}

.mbui-coupon-style-2 .mbui-coupon-buy-top {
    top: -7rpx;
}

.mbui-coupon-style-2 .mbui-coupon-buy-bottom {
    bottom: -7rpx;
}

.mbui-coupon-style-2 .mbui-coupon-buy {
    flex: 0;
    padding: 20rpx 16rpx;
    border-left: 2rpx dashed currentColor;
}
/* 第三种优惠券 */
.mbui-coupon-style-3 .mbui-coupon-li {
    border-radius: 8rpx;
    overflow: hidden;
}
.mbui-coupon-style-3 .style-3-text,
.mbui-coupon-style-3 .mbui-coupon-limit.style-3 {
    color: $app-color-main;
}
.mbui-coupon-style-3 .inner-bd {
    padding-top: 20rpx;
    padding-bottom: 14rpx;
    border-bottom: 2rpx dashed #f1f1f1;
    background: #fff;
}

.mbui-coupon-style-3 .inner-tags {
    position: absolute;
    font-size: 20rpx;
    top: 20rpx;
    left: -40rpx;
    transform: rotate(-45deg);
    padding: 0 40rpx;
    background: $app-color-main;
    color: #ffffff;
}

.mbui-coupon-style-3 .inner-fi-left,
.mbui-coupon-style-3 .inner-fi-right {
    content: "";
    position: absolute;
    width: 14rpx;
    height: 14rpx;
    border-radius: 100%;
    background: #f6f6f6;
    top: -6rpx;
    z-index: 1;
}

.mbui-coupon-style-3 .inner-fi-left {
    left: -7rpx;
}

.mbui-coupon-style-3 .inner-fi-right {
    right: -7rpx;
}

.mbui-coupon-style-3 .mbui-coupon-canbuy {
    line-height: 3;
}

/* 第四种优惠券 */
.mbui-coupon-style-4 .mbui-coupon-li {
    border: 2rpx solid currentColor;
    padding: 6rpx;
}

.mbui-coupon-style-4 .inner-bd {
    padding-left: 24rpx;
}

.mbui-coupon-style-4 .inner-bd-num,
.mbui-coupon-style-4 .mbui-coupon-limit,
.mbui-coupon-style-4 .mbui-coupon-canbuy {
    text-align: left;
}

.mbui-coupon-style-4 .mbui-coupon-tl {
    display: inline-block;
}

.mbui-coupon-style-4 .mbui-coupon-tl view {
    font-size: 24rpx;
    line-height: 1.2;
}

.mbui-coupon-style-4 .mbui-coupon-huan-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0;
    background: #fff;
}
.mbui-coupon-style-4 .inner-bd-num {
    color: $app-color-main;
}
.mbui-coupon-style-4 .style-3-text {
    color: $app-color-main;
}
.mbui-coupon-style-4 .inner-bd {
    flex: 1;
}

.mbui-coupon-style-4 .inner-fi {
    display: none;
}

.mbui-coupon-style-4 .mbui-coupon-buy {
    flex: 0;
    padding: 14rpx 16rpx;
    margin: 8rpx;
    background: $app-color-main;
}

.mbui-coupon-style-4 .inner-border {
    position: absolute;
    height: calc(100% - 8rpx);
    border: 2rpx dashed $app-color-main;
    width: calc(100% - 8rpx);
    left: 4rpx;
}
/* 风格切换隐藏项 */
.mbui-coupon-style-1 .style-2,
.mbui-coupon-style-1 .style-3,
.mbui-coupon-style-1 .style-4,
.mbui-coupon-style-2 .style-1,
.mbui-coupon-style-2 .style-3,
.mbui-coupon-style-2 .style-4,
.mbui-coupon-style-3 .style-1,
.mbui-coupon-style-3 .style-2,
.mbui-coupon-style-3 .style-4,
.mbui-coupon-style-4 .style-1,
.mbui-coupon-style-4 .style-2,
.mbui-coupon-style-4 .style-3 {
    display: none;
}
.pop-return-box {
    background: $color-white;
    border-radius: $border-radius-10;
    padding: $app-page-padding;
    width: 600rpx;

    textarea {
        max-height: 350rpx;
        background: #f7f7f7;
        border-radius: 8rpx;
        border: 1rpx solid #979797;
        padding: 10rpx 0;
        text-indent: 10rpx;
        margin: 24rpx 0;
        width: 598rpx;
    }

    .pop-return-title {
        display: flex;
        justify-content: center;

        text {
            font-size: 34rpx;
        }
    }
    .pop-return-center {
        font-size: 30rpx;
        padding: 48rpx 24rpx;
        text-align: center;
    }

    .pop-action {
        border-top: 1rpx solid rgba(0, 0, 0, 0.1);
        margin: 0 -24rpx -24rpx -24rpx;
        height: 110rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        view {
            width: 50%;
            text-align: center;
            height: 110rpx;
            line-height: 110rpx;
            font-size: 30rpx;
            color: $app-color-main;
        }

        & > view:first-child {
            color: $color-gray-1;
            border-right: 1rpx solid rgba(0, 0, 0, 0.1);
        }
    }

    .return-msg {
        margin-bottom: 20rpx;

        .card-group-cell {
            margin-left: 0 !important;
        }
    }

    .img-title {
        display: flex;
        color: $app-color-text-tip;
        margin-bottom: 20rpx;
    }

    .action {
        display: flex;
        flex-direction: row;

        .btn {
            flex: 1;
            border-radius: $border-radius-10;
            height: 70rpx;

            &:first-child {
                margin-left: 0;
            }
        }
    }
}
</style>
